<template>
  <el-dialog
    :title="$t('绑定邮箱')"
    :visible.sync="showPwdDialog"
    :before-close="handleClose"
    class="my-dialog__wrapper phone-dialog-wrap"
  >
    <div class="phone-dialog-content">
      <div class="items-center">
        <el-form
          :model="formData"
          ref="formData"
          label-width="0"
          class="demo-ruleForm"
          @submit.native.prevent
        >
          <p class="item-title">{{ $t('新邮箱') }}</p>
          <el-form-item
            prop="phone"
            :rules="[{ required: true, message: $t('邮箱不能为空') }]"
          >
            <el-input
              :placeholder="$t('请输入邮箱')"
              v-model="formData.phone"
            ></el-input>
          </el-form-item>
          <p class="item-title">{{ $t('验证码') }}</p>
          <div>
            <el-form-item
              :rules="[{ required: true, message: $t('验证码不能为空') }]"
              prop="code"
            >
              <el-input
                v-model="formData.code"
                :placeholder="$t('请输入验证码')"
              ></el-input>
              <p class="input-slot">
                <span v-if="!sending" @click="sendMsg">{{
                  $t('获取验证码')
                }}</span>
                <span v-else>{{ sendCount }}{{ $t('s后重试') }}</span>
              </p>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="showPwdDialog = false">{{ $t('取 消') }}</el-button>
      <el-button type="primary" @click="updatePwd">{{ $t('确 定') }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import api from '@/api/login'
import api2 from '@/api/personcenter'
export default {
  props: {
    mobile: null,
    email: null,
  },
  data() {
    return {
      sending: false,
      sendCount: 60,
      formData: {
        phone: '',
        code: '',
      },
      showPwdDialog: false,
      isMail: false,
    }
  },

  methods: {
    async sendMsg() {
      let params = {
        mail: this.formData.phone,
        scene: 2,
      }
      let res = await this.$http.post(api.sendEamil, params)
      if (res && res.code == 0) {
        this.$message.success(this.$t('发送成功'))
        if (this.sending) {
          return
        } else {
          this.sending = true
          this.sendCount = 60
          let timer = setInterval(() => {
            this.sendCount--
            if (this.sendCount <= 0) {
              clearInterval(timer)
              this.sending = false
            }
          }, 1000)
        }
      } else {
        this.$message.error(res.msg || this.$t('网络错误'))
      }
    },
    updatePwd() {
      this.$refs['formData'].validate(async (valid) => {
        if (valid) {
          let res = await this.$http.put(api2.updateMail, {
            code: this.formData.code,
            mail: this.formData.phone,
          })
          if (res && res.code == 0) {
            this.$message.success(this.$t('设置成功'))
            this.$emit('initMail')
            this.showPwdDialog = false
          } else {
            this.$message.error(res.msg || this.$t('网络错误'))
          }
        }
      })
    },
    handleClose(done) {
      this.$confirm(this.$t('确认关闭？'))
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    show() {
      this.showPwdDialog = true
    },
  },
}
</script>
<style lang="scss">
.phone-dialog-content {
  padding: 1rem 7rem;
  .input-slot {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.89rem;
    cursor: pointer;
    color: #045fb2;
  }
  .item-title {
    font-size: 0.89rem;
    margin-bottom: 0.89rem;
    .check-va {
      font-size: 0.89rem;
      cursor: pointer;
      color: #045fb2;
      float: right;
      text-decoration: underline;
    }
  }
}
</style>
